<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理页面</title>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link href="../lib/layui/css/layui.css">
</head>

<body>
    <form class="layui-form layui-col-space5">
        <div class="layui-input-inline layui-show-xs-block">
            <input class="layui-input" placeholder="姓名" name="name" id="name"></div>
        <div class="layui-input-inline layui-show-xs-block">
            <input class="layui-input" placeholder="身份证号" name="idcard" id="idcard"></div>
        <div class="layui-input-inline layui-show-xs-block">
            <select name="department" id="dep">
            </select>
        </div>
        <div class="layui-input-inline layui-show-xs-block">
            <input type="text" name="begindate" placeholder="入职日期" autocomplete="off" class="layui-input" id="begindate"></div>
        <div class="layui-input-inline layui-show-xs-block">
            <button class="layui-btn" type="button" id="search">
            <i class="layui-icon">&#xe615;</i></button>
        </div>
    </form>

    <table class="layui-hide" id="employee" lay-filter="employeeTable"></table>

    <script src="../js/jquery.min.js"></script>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        layui.use(['table', 'layer', 'form', 'laydate'], function() {
            let table = layui.table
            let layer = layui.layer
            let form = layui.form
            let laydate = layui.laydate

            // 默认配置 axios自动携带cookie
            axios.defaults.withCredentials = true;

            //解决layui的ajax请求携带cookie
            $.ajaxSetup({
                xhrFields: {
                    withCredentials: true,
                },
                crossDomain: true,
            });

            //条件查询
            $("#search").on("click", () => {
                table.reload("employee", {
                    url: 'http://localhost:5267/employees/conditions',
                    where: {
                        name: $("#name").val(),
                        idCard: $("#idcard").val(),
                        department: $("#dep").val(),
                        begindate: $("#begindate").val(),
                    } //设定异步数据接口的额外参数
                });
            })

            //获取部门数据
            axios.get("http://localhost:5267/department").then(res => {
                if (res.data.code == 502) {
                    layer.msg("用户信息过期,请重新登录", {
                        time: 2000
                    }, () => {
                        window.parent.location.href = "../login.html"
                    })

                }
                $("#dep").empty();
                //index 索引  item 对象
                $.each(res.data.data, (index, item) => {
                    $("#dep").append('<option value="' + item.name + '">' + item.name + "</option>")
                })
                form.render();
            });
            //时间初始化
            laydate.render({
                elem: "#begindate"
            })


            //初始化table列表
            let emTable = table.render({
                elem: '#employee',
                url: 'http://localhost:5267/employees' //数据接口
                    ,
                title: '员工档案表',
                toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    ,
                page: true,
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            title: 'ID',
                            sort: true,
                            fixed: 'left',
                            align: 'center',
                        }, {
                            field: 'name',
                            title: '姓名',
                            align: 'center',
                        }, {
                            field: 'gender',
                            title: '性别',
                            align: 'center',
                        }, {
                            field: 'birthday',
                            title: '生日',
                            sort: true,
                            align: 'center',
                        }, {
                            field: 'idCard',
                            title: '身份证',
                            align: 'center',
                        }, {
                            field: 'email',
                            title: '邮箱',
                            align: 'center',
                            edit: "text",
                        }, {
                            field: 'phone',
                            title: '电话',
                            align: 'center',
                            edit: "text",
                        }, {
                            field: 'department',
                            title: '部门',
                            align: 'center',
                        }, {
                            field: 'workState',
                            title: '在职状态',
                            align: 'center',
                            templet: function(res) {
                                let key = res.workState;
                                if (key == "在职") {
                                    return '<input type="checkbox" name="workState" value="' + res.id + '" lay-skin="switch" lay-text="在职|离职" checked lay-filter="workState">'
                                } else {
                                    return '<input type="checkbox" name="workState" value="' + res.id + '" lay-skin="switch" lay-text="在职|离职" lay-filter="workState">'
                                }

                            },
                        }
                    ]
                ]
            });
            //监听在职状态操作
            form.on('switch(workState)', function(obj) {
                let id = this.value;
                let status = obj.elem.checked == true ? "在职" : "离职";
                axios.patch("http://localhost:5267/employees", {
                    id: id,
                    value: status,
                    field: 'workstate'
                }).then((res) => {
                    if (res.data.code == 200) {
                        layer.msg("操作成功", {
                            icon: 1,
                            time: 3000
                        })
                    } else {
                        layer.msg("操作失败", {
                            icon: 2,
                            time: 3000
                        })
                    }
                })
            });
            //监听邮箱与电话编辑
            table.on('edit(employeeTable)', function(obj) {
                let value = obj.value //得到修改后的值
                    ,
                    data = obj.data //得到所在行所有键值
                    ,
                    field = obj.field; //得到字段
                axios.patch("http://localhost:5267/employees", {
                    id: data.id,
                    value: value,
                    field: field,
                }).then((res) => {
                    if (res.data.code == 200) {
                        layer.msg("操作成功", {
                            icon: 1,
                            time: 3000
                        })
                    } else {
                        layer.msg("操作失败", {
                            icon: 2,
                            time: 3000
                        })
                    }
                })
            });
            //监听头工具栏事件
            table.on('toolbar(employeeTable)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id),
                    data = checkStatus.data; //获取选中的数据 数组
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            type: 2,
                            area: ["95%", "100%"],
                            title: "添加员工",
                            content: "addEmployee.html",
                            success: function(layero, index) {
                                let body = layer.getChildFrame("body", index);
                            }
                        })
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            let id = data[0].id;
                            //弹框
                            layer.open({
                                type: 2,
                                area: ["95%", "100%"],
                                title: "编辑【" + data[0].name + "】的信息",
                                content: "updateEmployee.html",
                                success: function(layero, index) {
                                    let body = layer.getChildFrame("body", index);
                                    body.find('#ids').val(data[0].id) //再给子页面标签赋值
                                }
                            })
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            layer.confirm('确定删除？？？', function(index) {
                                layer.close(index);
                                //向服务端发送删除指令
                                let ids = new Array()
                                for (const i in data) {
                                    ids[i] = data[i].id
                                }
                                axios.delete("http://localhost:5267/employees", {
                                    data: {
                                        ids: ids,
                                    }
                                }).then((res) => {
                                    if (res.data.code == 200) {
                                        layer.msg("操作成功", {
                                            icon: 1,
                                            time: 3000
                                        }, function(index) {
                                            emTable.reload();
                                        })
                                    } else {
                                        layer.msg("操作失败", {
                                            icon: 2,
                                            time: 3000
                                        })
                                    }
                                })
                            });
                        }
                        break;
                };
            });

        })
    </script>

</body>

</html>